<template>
  <div class="container">
    <div class="left-grid">
      <el-card>
        <el-row>
          <el-form>
            <el-form-item label="柱状图标题">
              <el-input v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="数据类型名称">
              <el-input v-model="series_name"></el-input>
            </el-form-item>
            <el-form-item label="横坐标">
              <el-input v-model="input_axis"></el-input>
            </el-form-item>
            <el-form-item label="纵坐标">
              <el-input v-model="input_series"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="insertData">插入数据</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" @click="create_axis"
                >点击生成表格</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
      <el-card>
        <el-row>
          <el-table :data="table_data" :show-header="true" :height="320" stripe>
            <el-table-column type="index" label="序号" width="100%">
            </el-table-column>
            <el-table-column prop="axis" label="横坐标"></el-table-column>
            <el-table-column prop="series" label="纵坐标"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="danger" @click="deleteItemByIndex(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="right-grid" ref="myChart"></div>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      table_data: [
        { axis: "传音控股", series: 75.19 },
        { axis: "中科曙光", series: 73.13 },
        { axis: "工业富联", series: 62.41 },
        { axis: "同花顺", series: 59.94 },
        { axis: "大华股份", series: 59.46 },
        { axis: "中微公司", series: 53.75 },
        { axis: "中国卫通", series: 46.69 },
        { axis: "浪潮信息", series: 46.64 },
        { axis: "三花智控", series: 41.21 },
        { axis: "中国石油", series: 40.92 },

        { axis: "德业股份", series: -74.28 },
        { axis: "广联达", series: -72.72 },
        { axis: "德方纳米", series: -72.32 },
        { axis: "迈为股份", series: -69.03 },
        { axis: "弘元绿能", series: -68.6 },
        { axis: "晶澳科技", series: -66.37 },
        { axis: "福斯特", series: -64.38 },
        { axis: "锦浪科技", series: -61.53 },
        { axis: "中国中免", series: -60.91 },
        { axis: "璞泰来", series: -59.12 },
      ],
      title: "在线绘制柱状图",
      series_name: "销量",
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_axis: "",
      input_series: 0,
    };
  },
  mounted() {
    this.create_axis();
  },
  methods: {
    create_axis() {
      //3.初始化实例对象 echarts.init(dom容器)
      var data_xAxis = [];
      var data_series = [];
      var data_legend = [this.series_name];
      for (var i = 0; i < this.table_data.length; i++) {
        data_xAxis.push(this.table_data[i].axis);
        data_series.push(this.table_data[i].series);
      }
      var dom = this.$refs["myChart"]; // 获取dom节点
      var myChart = this.echarts.init(dom);
      //4.指定配置项和数据
      var option = {
        title: {
          text: this.title,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        tooltip: {},
        legend: {
          data: data_legend,
        },
        xAxis: {
          data: data_xAxis,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "black",
              fontSize: 16,
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: this.series_name,
            type: "bar",
            data: data_series,
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              // formatter: "{c}%", //显示百分号
              textStyle: {
                //数值样式
                color: "black", //字体颜色
                fontSize: 16, //字体大小
              },
            },
          },
        ],
      };
      //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    deleteItemByIndex(row) {
      var index = this.table_data.findIndex((item) => item.axis == row.axis);
      this.table_data.splice(index, 1);
      this.create_axis();
    },
    insertData() {
      this.table_data.push({
        axis: this.input_axis,
        series: this.input_series,
      });
      this.create_axis();
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 100%;
}

.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 20px;
  height: 90%;
}

.right-grid {
  background-color: #f9ecc3;
  border-radius: 2%;
  padding: 20px;
  height: 600px;
}

.grid-content1 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 35vw;
}

.grid-content2 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 65vw;
}

.bg-purple {
  background: #7e2970;
}
.bg-purple-light {
  background: #071c4d;
}
</style>
